<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Download"
          @click="handleStockOut"
          v-hasPermi="['erp:skesItemDetail:stockOut']"
          >出库</el-button
        >
      </el-col>
    </el-row>
    <el-card class="box-card">
      <ul class="list-group list-group-striped">
        <li class="list-group-item">
          <span> 商品id </span>
          <div class="pull-right">{{ detail.id }}</div>
        </li>
        <li class="list-group-item">
          <span> 回收编号 </span>
          <div class="pull-right">{{ detail.recycleCode }}</div>
        </li>
        <li class="list-group-item">
          <span> 品牌 </span>
          <div class="pull-right">{{ detail.brand }}</div>
        </li>
        <li class="list-group-item">
          <span> 型号 </span>
          <div class="pull-right">{{ detail.model }}</div>
        </li>
        <li class="list-group-item">
          <span> 编码 </span>
          <div class="pull-right">{{ detail.ref }}</div>
        </li>
        <li class="list-group-item">
          <span> 回收价格 </span>
          <div class="pull-right">{{ detail.recyclePrice }}</div>
        </li>
        <li class="list-group-item">
          <span> 回收时间 </span>
          <div class="pull-right">{{ detail.recycleTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 成交价 </span>
          <div class="pull-right">{{ detail.salesPrice }}</div>
        </li>
        <li class="list-group-item">
          <span> 下架时间 </span>
          <div class="pull-right">{{ detail.salesTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 销售方 </span>
          <div class="pull-right">{{ detail.salesPerson }}</div>
        </li>
        <li class="list-group-item">
          <span> 销售提成 </span>
          <div class="pull-right">{{ detail.salesCommissions }}</div>
        </li>
        <li class="list-group-item">
          <span> 运费 </span>
          <div class="pull-right">{{ detail.expressFee }}</div>
        </li>
        <li class="list-group-item">
          <span> 维修成本 </span>
          <div class="pull-right">{{ detail.maintenanceCost }}</div>
        </li>
        <li class="list-group-item">
          <span> 维修提成 </span>
          <div class="pull-right">{{ detail.maintenanceCommissions }}</div>
        </li>
        <li class="list-group-item">
          <span> 维修人 </span>
          <div class="pull-right">{{ detail.maintenancePerson }}</div>
        </li>
        <li class="list-group-item">
          <span> 维修时间 </span>
          <div class="pull-right">{{ detail.maintenanceTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 商品状态 </span>
          <div class="pull-right">
            <dict-tag :options="item_status" :value="detail.itemStatus" />
          </div>
        </li>
        <li class="list-group-item">
          <span> 故障描述 </span>
          <div class="pull-right">{{ detail.maintenanceDesc }}</div>
        </li>
        <li class="list-group-item">
          <span> 利润 </span>
          <div class="pull-right">{{ detail.profit }}</div>
        </li>
        <li class="list-group-item">
          <span> 打款状态 </span>
          <div class="pull-right">
            <dict-tag
              :options="payment_status"
              :value="detail.mpaymentStatus"
            />
          </div>
        </li>
        <li class="list-group-item">
          <span> 备注 </span>
          <div class="pull-right">{{ detail.remark }}</div>
        </li>
        <li class="list-group-item">
          <span> 入库时间 </span>
          <div class="pull-right">{{ detail.warehouseEntryTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 客户姓名 </span>
          <div class="pull-right">{{ detail.mcustomerName }}</div>
        </li>
        <li class="list-group-item">
          <span> 到款状态 </span>
          <div class="pull-right">
            <dict-tag
              :options="payment_status"
              :value="scope.row.cpaymentStatus"
            />
          </div>
        </li>
        <li class="list-group-item">
          <span> 到款方式 </span>
          <div class="pull-right">{{ detail.paymentWay }}</div>
        </li>
        <li class="list-group-item">
          <span> 到款时间 </span>
          <div class="pull-right">{{ detail.cPaymentTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 售出客户 </span>
          <div class="pull-right">{{ detail.ccustomerName }}</div>
        </li>
        <li class="list-group-item">
          <span> 打款时间 </span>
          <div class="pull-right">{{ parseTime(scope.row.mpaymentTime) }}</div>
        </li>
        <li class="list-group-item">
          <span> 回收时间 </span>
          <div class="pull-right">{{ detail.recycleTime }}</div>
        </li>
        <li class="list-group-item">
          <span> 快递单号 </span>
          <div class="pull-right">{{ detail.expressNo }}</div>
        </li>
        <li class="list-group-item">
          <span> 其它 </span>
          <div class="pull-right">{{ detail.otherRemark }}</div>
        </li>
      </ul>
    </el-card>
  </div>
</template>
<script setup name="detail">
import { listTable, stockOut } from "@/api/system/skesItemDetail";
import { optionSelect } from "@/api/system/skesItem";
import { userOptionSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const selectionData = ref([]);
const total = ref(0);
const loading = ref(true);
const showSearch = ref(false);
const summaryInfo = ref({});

const stockOutTime = ref([]);
const mPaymentTime = ref([]);
const cPaymentTime = ref([]);
const recycleTime = ref([]);
const warehouseEntryTime = ref([]);
const salesTime = ref([]);
const maintenanceTime = ref([]);
const { item_status } = proxy.useDict("item_status");
const { payment_status } = proxy.useDict("payment_status");
const route = useRoute();

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: route.params.itemId,
  },
});
const { queryParams, form, rules } = toRefs(data);
/** 商品下拉框 */
const remoteLoading = ref(false);
const itemOptions = ref([]);
async function getItemOption(query) {
  if (query) {
    remoteLoading.value = true;
    const { data } = await optionSelect({ queryKey: query });
    itemOptions.value = data.map((i) => {
      const { id, brand, ref: re, recyclePrice, model, expressNo } = i;
      return {
        value: i.id,
        label: `${id},${brand},${re},${recyclePrice},${model},${
          expressNo || ""
        }`,
        brand: i.brand,
        recyclePrice: i.recyclePrice,
      };
    });
    remoteLoading.value = false;
  }
}
getItemOption(" ");
/** 用户下拉框 */
const userLoading = ref(false);
const userOptions = ref([]);
async function getUserOption(query) {
  if (query) {
    userLoading.value = true;
    const { data } = await userOptionSelect({ queryKey: query });
    userOptions.value = data.map((i) => {
      const { userId, nickName, userName } = i;
      return {
        value: i.nickName,
        label: `${userId},${nickName},${userName}`,
      };
    });
    userLoading.value = false;
  }
}
getUserOption(" ");
/** 查询列表 */
const detail = ref({});
function getList() {
  loading.value = true;
  listTable({ ...queryParams.value }).then((response) => {
    detail.value = response.rows[0];
    total.value = response.total;
    loading.value = false;
  });
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  stockOutTime.value = [];
  mPaymentTime.value = [];
  cPaymentTime.value = [];
  recycleTime.value = [];
  warehouseEntryTime.value = [];
  salesTime.value = [];
  maintenanceTime.value = [];
  handleQuery();
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "system/skesItemDetail/export",
    {
      ...queryParams.value,
    },
    `skesItemDetail_${new Date().getTime()}.xlsx`
  );
}
/** 出库 */
function handleStockOut() {
  const brand = detail.brand;
  proxy.$modal
    .confirm('是否确认出库商品"' + brand)
    .then(function () {
      return stockOut({ ids: detail.id });
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("出库成功");
    })
    .catch(() => {});
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  selectionData.value = selection.map((i) => ({
    id: i.id,
    brand: i.brand,
  }));
}
getList();
</script>
